<template>
  <div>
    <h1>App:{{ count }}</h1>
    <h1>App:{{ person }}</h1>
    <button @click="changeA">show</button>
    <hr />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>


<script  setup lang="ts">
import { ref, watch } from "vue";
const count = ref(1);
const person = ref({
  name: "xiyu",
  age: 18,
  girl: {
    name: "xiaohuang",
    age: 19,
  },
});

/*
  2. vue3--watch直接监视ref对象的value属性
    - 如果监视的value值是一个基本类型,需要使用函数式写法,并且可以直接监视到这个值的改变
    - 如果监视的value值是一个对象类型,非函数式写法,不能监听当前值被替换,默认深度监听内部属性的改变
    - 如果监视的value值是一个对象类型,函数式写法,则只能监听当前值被替换
*/
// watch(
//   () => count.value,
//   () => {
//     console.log("监视到count改变了");
//   }
// );
// watch(
//   () => person.value,
//   () => {
//     console.log("监视到person改变了");
//   }
// );

// watch(
//   person,
//   () => {
//     console.log("监视到person改变了");
//   },
//   { deep: true }
// );
watch(
  [count, person],
  () => {
    console.log("改变了");
  },
  { deep: true }
);
const changeA = () => {
  count.value++;
  // person.value = { ...person.value, age: 20 };
  person.value.age++;
};
</script>


<style  scoped >
</style> 